// 波函数坍缩样式
.wave-function-collapse {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(24, 144, 255, 0.05) 100%);
  
  .wave-controls {
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(114, 46, 209, 0.1) 100%);
    border-bottom: 1px solid rgba(24, 144, 255, 0.2);
    
    .ant-btn {
      &.ant-btn-primary {
        background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
        border: none;
        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
        
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
        }
      }
      
      &.ant-btn-default {
        border-color: rgba(24, 144, 255, 0.3);
        color: #1890ff;
        
        &:hover {
          background: rgba(24, 144, 255, 0.1);
          border-color: #722ed1;
          color: #722ed1;
        }
      }
    }

    .ant-slider {
      .ant-slider-rail {
        background: rgba(24, 144, 255, 0.1);
      }
      
      .ant-slider-track {
        background: linear-gradient(90deg, #1890ff 0%, #722ed1 100%);
      }
      
      .ant-slider-handle {
        border-color: #1890ff;
        
        &:hover, &:focus {
          border-color: #722ed1;
          box-shadow: 0 0 0 5px rgba(114, 46, 209, 0.2);
        }
      }
    }
  }

  .wave-canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at center, rgba(24, 144, 255, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    
    .wave-canvas {
      width: 100%;
      height: 100%;
      display: block;
      cursor: crosshair;
    }
    
    .wave-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      
      .wave-stats {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(0, 0, 0, 0.7);
        padding: 8px 12px;
        border-radius: 8px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(24, 144, 255, 0.3);
      }
    }
  }

  .wave-explanation {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(24, 144, 255, 0.2);
    backdrop-filter: blur(10px);
  }
}

// 季节特定样式
.season-spring .wave-function-collapse {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(82, 196, 26, 0.05) 100%);
  
  .wave-controls {
    background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(255, 133, 192, 0.1) 100%);
    border-bottom-color: rgba(82, 196, 26, 0.2);
  }
  
  .wave-canvas-container {
    background: radial-gradient(ellipse at center, rgba(82, 196, 26, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
  }
  
  .wave-overlay .wave-stats {
    border-color: rgba(82, 196, 26, 0.3);
  }
  
  .wave-explanation {
    border-top-color: rgba(82, 196, 26, 0.2);
  }
}

.season-summer .wave-function-collapse {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(24, 144, 255, 0.05) 100%);
  
  .wave-controls {
    background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(250, 219, 20, 0.1) 100%);
    border-bottom-color: rgba(24, 144, 255, 0.2);
  }
  
  .wave-canvas-container {
    background: radial-gradient(ellipse at center, rgba(24, 144, 255, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
  }
  
  .wave-overlay .wave-stats {
    border-color: rgba(24, 144, 255, 0.3);
  }
  
  .wave-explanation {
    border-top-color: rgba(24, 144, 255, 0.2);
  }
}

.season-autumn .wave-function-collapse {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(250, 140, 22, 0.05) 100%);
  
  .wave-controls {
    background: linear-gradient(135deg, rgba(250, 140, 22, 0.1) 0%, rgba(212, 56, 13, 0.1) 100%);
    border-bottom-color: rgba(250, 140, 22, 0.2);
  }
  
  .wave-canvas-container {
    background: radial-gradient(ellipse at center, rgba(250, 140, 22, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
  }
  
  .wave-overlay .wave-stats {
    border-color: rgba(250, 140, 22, 0.3);
  }
  
  .wave-explanation {
    border-top-color: rgba(250, 140, 22, 0.2);
  }
}

.season-winter .wave-function-collapse {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(114, 46, 209, 0.05) 100%);
  
  .wave-controls {
    background: linear-gradient(135deg, rgba(114, 46, 209, 0.1) 0%, rgba(19, 194, 194, 0.1) 100%);
    border-bottom-color: rgba(114, 46, 209, 0.2);
  }
  
  .wave-canvas-container {
    background: radial-gradient(ellipse at center, rgba(114, 46, 209, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
  }
  
  .wave-overlay .wave-stats {
    border-color: rgba(114, 46, 209, 0.3);
  }
  
  .wave-explanation {
    border-top-color: rgba(114, 46, 209, 0.2);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .wave-function-collapse {
    .wave-controls {
      padding: 12px 16px;
      
      .ant-space {
        gap: 8px !important;
      }
      
      .ant-btn {
        font-size: 12px;
        padding: 4px 8px;
      }
    }
    
    .wave-overlay .wave-stats {
      top: 8px;
      right: 8px;
      font-size: 11px;
      padding: 6px 8px;
    }
    
    .wave-explanation {
      padding: 8px 16px;
      font-size: 11px;
    }
  }
}

@media (max-width: 480px) {
  .wave-function-collapse {
    .wave-controls {
      padding: 8px 12px;
      
      .ant-space {
        flex-direction: column;
        align-items: stretch;
        gap: 6px !important;
      }
    }
    
    .wave-overlay .wave-stats {
      position: relative;
      top: auto;
      right: auto;
      margin: 8px;
      background: rgba(0, 0, 0, 0.8);
    }
  }
}
